/*====================================================
    base styles
====================================================*/
.show { display: block !important; }
.hide { display: none !important; }
.block { display: block; margin-left: auto; margin-right: auto; }
.inblock { display: inline-block; }


/*====================================================
    header styles
====================================================*/
header {
  width: 100%;
  height: auto;
  background-color: @themeBg;
}
nav {
	width: 100%;
	height: @navHeight;
  	line-height: @navHeight;
  	text-align: center;
  	// logo
	.logo {
		float: left;
		margin-left: 30px;
		display: inline-block;
		img {
			width: 26px;
			height:26px;
		}
		b {
			margin-left: 6px;
		    vertical-align: -4px;
		    font-size: 14px;
		    font-weight: bold;
		    letter-spacing: 2px;
			color: #fff;
		}
	}
  	// 导航
  	ul {
		display: inline-block;
  		li {
  			display: inline-block;
			padding: 0px 30px;
  			a {
  				color: @navColor;
  				font-size: 14px;
  				font-weight: bold;
  				letter-spacing: 1px;
  			}
  		}
  	}
  	// 右侧内容区域
  	.nav-right {
  		float: right;
  		margin-right: 5%;
  	}
  	// 搜索容器
  	.search {
		float: left;
		height: @navHeight;
		line-height: @navHeight;
		color: @navColor;
		overflow: hidden;
		i {
			vertical-align: -4px;
		}
  	}
  	// 用户容器
  	.user {
  		float: left;
  		margin-left: 20px;  		
  		// 用户登录
  		.user-login {
  			height: @navHeight;
  			line-height: @navHeight;
  			color: @navColor;
  			overflow: hidden;
  			i.user-icon {
  				font-size: 28px;
  				color: @navColor;
  			}
  			span {
  				margin-left: 4px;
				vertical-align: 3px;
				font-weight: bold;
				font-size: 13px;
  			}
  		}
  	}
}
.top-menu {
	width: 100%;
	height: 34px;
	line-height: 34px;
	overflow: hidden;
	background-color: #fff;
	-moz-box-shadow:0px 2px 5px #e0e0e0; 
	-webkit-box-shadow:0px 2px 5px #e0e0e0; 
	box-shadow:0px 2px 5px #e0e0e0;
	text-align: center;
	.menu-list {
		display: inline-block;
		li {
			display: inline-block;
			float: left;
			padding: 0px 20px;
			font-size: 13px;
			color: @themeColor;
			font-weight: bold;
		}
	}
}


/*====================================================
    index styles
====================================================*/
.wrap-inner {
    padding: 30px 30px 40px 30px;
}
@media only screen and (max-width: 870px) {
    .wrap-inner {
        padding: 15px;
    }
}
.content {
    position: relative;
    margin: 0 auto;
    padding: 0;       
	.list {
        clear: both;
        overflow: hidden;
        max-width: 2000px;
        margin: 0 auto;
		.item {
            float: left;
            margin: 0 15px 30px 15px;
			width: 200px;
			padding: 10px 10px;
			background-color: #fff;
			img {
				width: 100%;
				height: 150px;
			}
			.description {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
			.other {
				color: #aaa;
				overflow: hidden;
				text-align: right;
				ul {
					display: inline-block;
					li {
						display: inline-block;
						margin: 0px 3px;
						i {
							font-size: 13px;
							margin-right: 2px;
						}
                        i.look-icon {
                            font-size: 16px;
                        }
					}
				}
			}
		}
	}
}

@media screen and (max-width: 2059px) {
    .content .list {
        max-width: 1750px;
    }
}
@media screen and (max-width: 1809px) {
    .content .list {
        max-width: 1500px;
    }
}
@media screen and (max-width: 1559px) {
    .content .list {
        max-width: 1250px;
    }
}
@media screen and (max-width: 1309px) {
    .content .list {
        max-width: 1000px;
    }
}
@media screen and (max-width: 1059px) {
    .content .list {
        max-width: 750px;
    }
}
@media screen and (max-width: 809px) {
    .content .list {
        max-width: 500px;
    }
}


/*====================================================
    footer styles
====================================================*/
footer {
    position: relative;
    bottom: 0px;
    .description {
        max-height: 140px;
        background: #fff;
        padding: 10px 0px;
        section {
            display: inline-block;
        }
        .logo {
            display: block;
            width: 88px;
            height: 26px;
            margin: 0px auto 10px auto;
            overflow: hidden;
            img {
                width: 26px;
                height: 26px;
            }
            b {
                margin-left: 6px;
                vertical-align: -4px;
                font-size: 14px;
                font-weight: bold;
                letter-spacing: 2px;
            }
        }
        .about {
            width: 20%;
        }
        .href {
            width: 48%;
            text-align: center;
            ul {
                clear: both;
                overflow: hidden;
                display: inline-block;
                margin: 0px auto;
                li {
                    float: left;
                    padding: 4px 10px;
                    
                    a {
                        color: @themeColor;
                        font-weight: bold;
                    }
                }
            }
        }
        .contact {
            width: 30%;
        }
        .about,.contact {
            text-align: center;
            font-weight: bold;
            a,li {
                display: block;
                padding: 4px 0px;
                color: @themeColor;
            }
        }
        .about,.href,.contact {
            min-height: 84px;
        }
    }
    .copy-right {
        height: 30px;
        line-height: 30px;
        background: @themeBg;
        color: @navColor;
        text-align: center;
        letter-spacing: 1px;
    }
}


/*====================================================
    backTop styles
====================================================*/
.back-top {
    position: fixed;
    bottom: 40px;
    right: 14px;
    i {
        font-size: 40px;
        color: @themeColor;
    }
}
